<template>
  <div class="ly-content">
    <div class="ly-center">
      <div class="member-head" @click="inputClick">
        <div class="head" :style="{backgroundImage:'url('+member.faceImgUrl+')'}"></div>
        <input ref="file" type="file" style="display: none" accept="image/*" capture="camera"
               @change="inputOnChange($event)"/>
        <div class="tips">人脸注册</div>
      </div>
      <yd-cell-group>
        <yd-cell-item>
          <span slot="left">昵称&nbsp;</span>
          <input slot="right" v-model="member.userName" type="text" placeholder="请输入昵称">
        </yd-cell-item>
        <yd-cell-item>
          <span slot="left">手机号&nbsp;</span>
          <input slot="right" v-model="member.cellPhone" type="number" placeholder="请输入手机号">
        </yd-cell-item>
        <yd-cell-item>
          <span slot="left">身份证号&nbsp;</span>
          <input slot="right" v-model="member.idCard" type="text" placeholder="请输入身份证号">
        </yd-cell-item>
        <yd-cell-item>
          <span slot="left">身份&nbsp;&nbsp;</span>
          <select slot="right" v-model="member.identity">
            <option value="">请选择身份</option>
            <option value="1">家属</option>
            <option value="2">租客</option>
            <option value="3">其他</option>
          </select>
        </yd-cell-item>

        <yd-cell-item v-if="member.identity !=1 && member.identity != '' ">
          <span slot="left">人脸有效期&nbsp;&nbsp</span>
          <yd-datetime type="datetime" v-model="member.expireDate" slot="right"></yd-datetime>
        </yd-cell-item>

        <!--<yd-cell-item v-if="member.identity !=1 && member.identity != '' ">-->
        <!--<span slot="left">人脸有效期&nbsp;&nbsp</span>-->
        <!--<select slot="right" v-model="member.expireDate">-->
        <!--<option value="">请选择身份</option>-->
        <!--<option value="1">1个月</option>-->
        <!--<option value="3">2个月</option>-->
        <!--<option value="6">6个月</option>-->
        <!--<option value="12">一年</option>-->
        <!--</select>-->
        <!--</yd-cell-item>-->
      </yd-cell-group>
      <yd-cell-group title="房间">
        <yd-cell-item type="checkbox" v-for="room in roomList" :key="room.id">
          <span slot="left">{{room.housingName}}{{room.roomInfo}}</span>
          <input slot="right" type="checkbox" :value="room.roomId" v-model="member.roomIds"/>
        </yd-cell-item>
      </yd-cell-group>

      <yd-button type="primary" class="ly-btn" size="large" @click.native="handleSubmit()">提交</yd-button>
      <yd-button type="danger" class="ly-btn" style="margin-bottom: 0.5rem;" size="large"
                 @click.native="handleDel(member.id)">删除
      </yd-button>

    </div>

  </div>


</template>

<script>
  import http from "../../http";
  import Compressor from 'compressorjs';

  export default {

    data() {
      return {
        preview: 0,
        name: "",
        roomList: [],
        member: {
          roomIds: [],
          identity: '',
        },
        faceId: '',
        userHead: '',
        housingId: '',
      }
    },
    created: function () {
      this.init();
      this.getUser();
    },
    mounted: function () {
    },
    methods: {

      getUser: function () {
        const _id = this.$route.query.id;
        http.get("/communityApps/personalCenter/member/info?id=" + _id).then(res => {
          if (res.data.code == 20000) {
            this.member = res.data.data;
            this.member.faceImgUrl = res.data.data.faceImgUrl;
            this.member.faceId = res.data.data.faceId;
            if(res.data.data.roomIds){
              this.member.roomIds = res.data.data.roomIds.split(",");
            }
            console.log(this.member);
          } else {
            this.$dialog.toast({
              mes: res.data.message,
              timeout: 1500
            });
          }
        });
      },

      init: function () {
        http.get("/communityApps/personalCenter/rooms?status=1").then(res => {
          if (res.data.code == 20000) {
            this.roomList = res.data.data;
          } else {
            this.$dialog.toast({
              mes: res.data.message,
              timeout: 1500
            });
          }
        });
      },

      inputClick: function () {
        this.$refs.file.click();
      },
      inputOnChange: function (e) {

        const file = e.target.files[0];
        if (!file) {
          return;
        }
        this.$dialog.loading.open('图片上传中...');
        new Compressor(file, {
          quality: 0.5,
          success: (result) => {
            this.$dialog.loading.close();
            const formData = new FormData();
            formData.append('file', result, result.name);
            formData.append('faceId', this.member.faceId);
            http.postFile("/communityApps/personalCenter/member/face", formData).then(res => {
              if (res.data.code == 20000) {
                this.member.faceImgUrl = res.data.data.imgUrl + '?r=' + Math.random();
                this.member.faceId = res.data.data.faceId;
                this.$dialog.toast({
                  mes: "人脸上传成功！",
                  timeout: 500,
                });
              } else {
                this.$dialog.toast({
                  mes: res.data.message,
                  timeout: 1500
                });
                this.member.faceImgUrl = "";
              }
            });

          },
          error(err) {
            console.log(err.message);
          },
        });

      },


      handleSubmit: function () {


        if (this.member.userName == "") {
          this.$dialog.toast({
            mes: "请先填写昵称",
            timeout: 1500
          });
        } else {

          if (this.member.identity == 1) {
            this.member.expireDate = "";
          }


          http.post("/communityApps/personalCenter/member", this.member).then(res => {
            if (res.data.code == 20000) {
              this.$dialog.toast({
                mes: "修改成功！",
                timeout: 500,
                callback: () => {
                  this.$router.push("/rongke/rkUser");
                }
              });
            } else if (res.data.code == 40004) {
              this.$dialog.toast({
                mes: res.data.message,
                timeout: 1500,
                callback: () => {
                  this.$router.push("/rongke/rkUser");
                }
              });
            } else {
              this.$dialog.toast({
                mes: res.data.message,
                timeout: 1500
              });
            }
          });
        }
      },


      handleDel: function (id) {
        http.get("/communityApps/personalCenter/member?id=" + id).then(res => {
          if (res.data.code == 20000) {
            this.$dialog.toast({
              mes: '删除成功',
              timeout: 1500,
              icon: 'success',
              callback: () => {
                this.$router.go(-1);
              }
            });
          } else {
            this.$dialog.toast({
              mes: res.data.message,
              timeout: 1500
            });
          }
        });
      }

    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  .member-head {
    width: 100%;
    height: 3.8rem;
    background: #fff url(../../assets/upload.png) no-repeat center;
    -webkit-background-size: 1.5rem;
    background-size: 1.5rem;
    border-bottom: 1px solid #eee;
    .head {
      width: 2.2rem;
      height: 2.2rem;
      margin: 0 auto;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      border-radius: 99%;
      position: relative;
      top: 0.8rem;
    }
    .tips {
      text-align: center;
      color: #666;
      margin-top: 0.8rem;
    }
  }

  .ly-btn {
    width: 86%;
    margin: 0.5rem auto 0;
  }
</style>

